---
description: Компонент позволяет поддерживать заданное соотношение сторон для вложенного контента.
---

<Overview group="utils">

# AspectRatio [tag:component]

Компонент позволяет поддерживать заданное соотношение сторон для вложенного контента.
Его можно использовать для отображения изображений, карт, видео и других медиа-файлов.

</Overview>

import { BlockWrapper } from '@/components/wrappers';

<Playground Wrapper={BlockWrapper}>
  ```jsx
  <AspectRatio ratio={16 / 9}>
    <img
      src="https://sun9-35.userapi.com/TH0O6TfKR2O5W8hjgSdzQzHvV_2TGRAXhLHuog/Js_f2L5EMYM.jpg"
      loading="lazy"
      alt="Лаунж зона в розовом неоне"
    />
  </AspectRatio>
  ```
</Playground>

## Контент

Элемент, который должен сохранять свои пропорции при изменении родительского контейнера, передаётся в свойство `children`.

## Пропорции

Свойство `ratio` определяет соотношение сторон (ширина/высота) контейнера.
Например, числовое значение `16 / 9` создаст контейнер с соотношением `"16:9"`, `1` создаст квадратный контейнер,
а `0.5` создаст контейнер, где высота в два раза больше ширины.

Принимает числовые или строковые (для токенов в виде `CSS`-переменных, например, `var(--css-aspect-ratio-var)`) значения.

## Режим отображения

Задаётся свойством `mode`.

- `"stretch"` — вложенный контент растягивается на весь родительский контейнер в соответствии с указанным `ratio` (по умолчанию);
- `"none"` — сохраняются исходные размеры контента.

## Свойства и методы [#api]

<PropsTable name="AspectRatio" />
